<!DOCTYPE html>
<html>
<head>
<title>Linear Electric Quadrupole</title>
</head>
<body>
<canvas id="quadrupoleCanvas" width="500" height="500"></canvas>
<script>
    const canvas = document.getElementById('quadrupoleCanvas');
    const ctx = canvas.getContext('2d');

    // --- General Style ---
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 1.2;
    ctx.font = 'italic 20px Times New Roman';
    ctx.textBaseline = 'middle';

    // --- Coordinates and Dimensions ---
    const cx = 180; // Center x of the charge axis
    const cy_mid = 250; // y-coordinate of the middle charge
    const l = 90; // distance l in pixels
    const r = 250; // distance r in pixels
    const theta = Math.PI / 4.2; // Angle in radians (~42.8 degrees)

    const topChargeY = cy_mid - l;
    const bottomChargeY = cy_mid + l;
    
    const chargeRadius = 5;
    const pointPRadius = 4;

    // --- Draw the vertical axis ---
    ctx.beginPath();
    ctx.moveTo(cx, topChargeY - 30);
    ctx.lineTo(cx, bottomChargeY + 30);
    ctx.stroke();

    // --- Draw the charges ---
    ctx.textAlign = 'right';

    // Top charge (+q)
    ctx.beginPath();
    ctx.arc(cx, topChargeY, chargeRadius, 0, 2 * Math.PI);
    ctx.stroke();
    ctx.fillText('+q', cx - 12, topChargeY);

    // Middle charge (-2q)
    ctx.beginPath();
    ctx.arc(cx, cy_mid, chargeRadius + 1, 0, 2 * Math.PI);
    ctx.fillStyle = '#606060';
    ctx.fill();
    ctx.fillStyle = 'black';
    ctx.fillText('-2q', cx - 12, cy_mid);
    
    // Bottom charge (+q)
    ctx.beginPath();
    ctx.arc(cx, bottomChargeY, chargeRadius, 0, 2 * Math.PI);
    ctx.stroke();
    ctx.fillText('+q', cx - 12, bottomChargeY);

    // --- Draw Point P and line r ---
    const pX = cx + r * Math.sin(theta);
    const pY = cy_mid - r * Math.cos(theta);

    // Line from middle charge to P
    ctx.beginPath();
    ctx.moveTo(cx, cy_mid);
    ctx.lineTo(pX, pY);
    ctx.stroke();

    // Point P
    ctx.beginPath();
    ctx.arc(pX, pY, pointPRadius, 0, 2 * Math.PI);
    ctx.fillStyle = '#606060';
    ctx.fill();
    ctx.fillStyle = 'black';
    ctx.textAlign = 'left';
    ctx.fillText('P', pX + 10, pY);

    // Label 'r'
    ctx.save();
    const rLabelX = cx + (r / 2) * Math.sin(theta);
    const rLabelY = cy_mid - (r / 2) * Math.cos(theta);
    ctx.translate(rLabelX, rLabelY);
    ctx.rotate(theta - Math.PI / 2);
    ctx.textAlign = 'center';
    ctx.fillText('r', 0, -10);
    ctx.restore();
    
    // --- Draw angle theta ---
    const arcRadius = 35;
    ctx.beginPath();
    ctx.arc(cx, cy_mid, arcRadius, -Math.PI / 2, -Math.PI / 2 + theta, false);
    ctx.stroke();

    // Label 'θ'
    const thetaLabelAngle = -Math.PI / 2 + theta / 2;
    const labelRadius = arcRadius * 0.7;
    const thetaX = cx + labelRadius * Math.cos(thetaLabelAngle);
    const thetaY = cy_mid + labelRadius * Math.sin(thetaLabelAngle);
    ctx.textAlign = 'center';
    ctx.fillText('θ', thetaX + 8, thetaY + 5);

    // --- Draw distance l indicator ---
    const l_h_line_len = 50; // Length of horizontal extension lines
    
    // Top horizontal line
    ctx.beginPath();
    ctx.moveTo(cx, cy_mid);
    ctx.lineTo(cx + l_h_line_len, cy_mid);
    ctx.stroke();

    // Bottom horizontal line
    ctx.beginPath();
    ctx.moveTo(cx, bottomChargeY);
    ctx.lineTo(cx + l_h_line_len, bottomChargeY);
    ctx.stroke();
    
    // Vertical line with arrows
    const v_line_x = cx + 25;
    ctx.beginPath();
    ctx.moveTo(v_line_x, cy_mid);
    ctx.lineTo(v_line_x, bottomChargeY);
    // Arrow at top
    ctx.moveTo(v_line_x, cy_mid);
    ctx.lineTo(v_line_x - 4, cy_mid + 6);
    ctx.moveTo(v_line_x, cy_mid);
    ctx.lineTo(v_line_x + 4, cy_mid + 6);
    // Arrow at bottom
    ctx.moveTo(v_line_x, bottomChargeY);
    ctx.lineTo(v_line_x - 4, bottomChargeY - 6);
    ctx.moveTo(v_line_x, bottomChargeY);
    ctx.lineTo(v_line_x + 4, bottomChargeY - 6);
    ctx.stroke();
    
    // Label 'l'
    ctx.textAlign = 'center';
    ctx.fillText('l', v_line_x, cy_mid + l / 2);

    // --- Draw caption ---
    ctx.font = '22px "KaiTi", "SimSun"';
    ctx.textAlign = 'center';
    ctx.fillText('习题 7-25 图', cx + 100, 470);

</script>
</body>
</html>